<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
    <p>{{joke}}</p>

</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            joke:"很好笑的笑话"
        },
        methods:{
          getJoke:function () {
              var that = this;
              // console.log(this.joke);
              axios.get("https://autumnfish.cn/api/joke").then
              (function (response) {
                  console.log(response.data)
                  that.joke = response.data;

              },function (err) {


              })

          }
        },
    })
</script>
</body>
</html>
